<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body class="gray-bg">

<style type="text/css">
	.info-box-content {
		padding: 5px 10px;
		margin-left: 90px;
	}
	.info-box-number {
		display: block;
		font-weight: bold;
		font-size: 18px;
		margin-top: 15px;
	}
	.info-box-text {
		text-transform: uppercase;
	}
	.ibox , .ibox-content {
		border: 0px !important ;
	}
	.info-box {
		display: block;
		min-height: 90px;
		background: #fff;
		width: 100%;
		box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.1) ; 
		border-radius: 2px;
		margin-bottom: 15px;
	}
	.bg-red{
		background-color: #dd4b39 !important;
	}
	.bg-aqua{
		background-color: #00c0ef !important ; 
	}
	.bg-yellow{
		background-color: #f39c12 !important ; 
	}
	span.info-box-icon {
		border-top-left-radius: 2px;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom-left-radius: 2px;
		display: block;
		float: left;
		height: 90px;
		width: 90px;
		text-align: center;
		font-size: 45px;
		line-height: 90px;
		background: rgba(0,0,0,0.2);
		color: #fff;
	}
</style>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
            	<div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>平台状态</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" style="height:430px" id="echarts-pie-chart"></div>
                    </div>
                </div>
            </div>
        	<div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h4><i class="fa fa-leaf"></i> 运行状况</h4>
                    </div>
                    <div class="ibox-content" style="padding-top:0px;">
                     	<div class="list-group">
						  <a href="#" class="list-group-item">服务器处理消息总量 <span class="badge">42</span></a>
						  <a href="#" class="list-group-item">丢失消息总量 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">每分钟平均处理数 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">压缩成功消息数量 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">单台机器每分钟最大处理数 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">压缩成功消息数量 <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">存储消息块花费时间(分钟) <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">系统处理延迟(ms) <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">预警发出时间(ms) <span class="badge">5</span></a>
						  <a href="#" class="list-group-item">存储处理数量(GB) <span class="badge">5</span></a>
						</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-sm-12"> 
        	<div class="row">
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5><i class="fas fa-paper-plane"></i> 平台监听情况</h5>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-hover no-margins monitor-table">
                                <thead>
                                    <tr>
                                        <th width="75%">属性</th>
                                        <th>值</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>接入应用数</td>
                                        <td>0个</td>
                                    </tr>
                                    <tr>
                                        <td>请求数量</td>
                                        <td>0个</td>
                                    </tr>
                                    <tr>
                                        <td>正常接入数</td>
                                        <td>0个</td>
                                    </tr>
                                    <tr>
                                        <td>异常数量</td>
                                        <td>0个</td>
                                    </tr>
                                    <tr>
                                        <td>SQL操作数量</td>
                                        <td>0个</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                
                <div class="col-sm-6">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5><i class="fab fa-docker"></i> 预警渠道</h5>
                        </div>
                        <div class="ibox-content">
                            <table class="table table-hover no-margins monitor-table">
                                <thead>
                                    <tr>
                                        <th width="75%">属性</th>
                                        <th>值</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>微信</td>
                                        <td>0个</td>
                                    </tr>
                                    <tr>
                                        <td>请求数量</td>
                                        <td>0个</td>
                                    </tr>
                                    <tr>
                                        <td>请求数量</td>
                                        <td>0个</td>
                                    </tr>
                                    <tr>
                                        <td>请求数量</td>
                                        <td>0个</td>
                                    </tr>
                                    <tr>
                                        <td>请求数量</td>
                                        <td>0个</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
         </div>
    </div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	<script th:src="@{/asserts/ajax/libs/report/echarts/echarts-all.js}"></script>

	<script type="text/javascript">
		$(function(){
			var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
	        var pieoption = {
	            title : {
	                text: '当天服务运行情况',
	                subtext: '当天的服务请求量',
	                x:'center'
	            },
	            tooltip : {
	                trigger: 'item',
	                formatter: "{a} <br/>{b} : {c} ({d}%)"
	            },
	            legend: {
	                orient : 'vertical',
	                x : 'left',
	                data:['系统访问','SQL操作','异常记录','业务日志','服务请求量']
	            },
	            calculable : true,
	            series : [
	                {
	                    name:'访问来源',
	                    type:'pie',
	                    radius : '55%',
	                    center: ['50%', '60%'],
	                    data:[
	                        {value:335, name:'系统访问'},
	                        {value:310, name:'SQL操作'},
	                        {value:234, name:'异常记录'},
	                        {value:135, name:'业务日志'},
	                        {value:1548, name:'服务请求量'}
	                    ]
	                }
	            ]
	        };
	        pieChart.setOption(pieoption);
	        $(window).resize(pieChart.resize);	
		}) ;	
	</script>	
	
</body>
</html>

